$modal-header-height: 53px;

body.automatewoo-modal-open {
	overflow: hidden;
}

.automatewoo-modal-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100000;
	// Center it vertically and horizontally.
	display: grid;
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
}

.automatewoo-modal {
	position: relative;
	max-height: 100%;
	width: min(560px, 93vw);
	display: grid;
	grid-template:
		[content-start x-start] #{$modal-header-height}
		[x-end] auto
		[content-end] /
		[content-start] 1fr [x-start] #{$modal-header-height} [x-end content-end];
	// Prevent overflowing children's box-shadow.
	overflow: hidden;

	body.automatewoo-modal-loading & {

		@include loader();

		.automatewoo-modal__body {
			opacity: 0.4;
		}
	}

	.automatewoo-icon-close {
		text-align: center;
		// Place it at the top right corner within the grid.
		grid-area: x;
		color: #666;
		cursor: pointer;
		box-shadow: -1px 1px $grey-light-border;

		&::before {
			font-size: 23px;
			font-family: dashicons;
			line-height: $modal-header-height;
			speak: none;
			-webkit-font-smoothing: antialiased;
			content: "\f335";
		}

		&:hover {
			background: $grey-very-light;
			color: $black;
		}
	}


	h2 {
		font-size: 1.4em;
	}

	h3 {
		font-size: 1.2em;
	}
}

.automatewoo-modal--size-lg {
	width: min(680px, 93vw);
}

.automatewoo-modal__contents {
	background-color: $grey-very-light;
	// Make it scroll the content except for the header.
	display: grid;
	grid-template-rows: auto 1fr;
	// Make the content span all grid areas.
	grid-area: content;
	max-height: 93vh;
}

.automatewoo-modal-overlay {
	background: rgba(#000, 0.35);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


.automatewoo-modal__header {
	display: flex;
	align-items: center;
	min-height: $modal-header-height;
	padding-right: $modal-header-height;
	background: $white;
	border-bottom: 1px solid $grey-light-border;
	box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);

	h1 {
		padding: 0 18px;
		font-size: 19px;
		line-height: 1.2;
		margin: 0;
	}
}


.automatewoo-modal__footer {
	box-sizing: border-box;
	background: $white;
	border-top: 1px solid $grey-light-border;
	box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
	padding: 14px 18px;
	text-align: right;

	&.aw-pull-right {
		width: 100%;
		float: right;

		.button {
			margin-left: 3px;
		}
	}
}


.automatewoo-modal__body {
	overflow: auto;
	min-height: 130px;

	hr {
		margin: 17px 0;
		border: none;
		border-bottom: 1px solid $grey-light-border;
	}

	ul {
		margin: 17px 0 17px;
	}
}

.automatewoo-modal__body-inner {
	margin: 17px 18px 22px;
}

